<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        1.1浏览器现状

            PC端常见浏览器

                360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。


            移动端常见浏览器

                UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏觉然,谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。



            国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。
            
            总结:兼容移动端主流浏览器，处理Webkit内核浏览器即可。


        1.2手机屏幕现状

            移动端设备屏幕尺寸非常多，碎片化严重。
            Android设备有多种分辨率∶480x800,480x854,540x960,720x1280，1080x1920等，还有传说中的2K，4k屏。
            近年来iPhone的碎片化也加剧了，其设备的主要分辨率有:640x960,640x1136,750x1334,1242x2208等。
            作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px。

     -->

     <!-- 
        1.3常见移动端屏幕尺寸

            设备              尺寸(英寸)  开发尺寸(px)    物理像素比(dpr)
            iphone3G          3.5        320*480        1.0
            iphone4/4s        3.5        320*480        2.0
            iphone5/5s/5c     4.0        320*568        2.0
            HTC One M8        4.5        360*640        3.0
            iphone6           4.7        375*667        2.0
            Nexus 4           4.7        384*640        2.0
            Nexus 5x          5.2        411*731        2.6
            iphone6 Plus      5.5        414*736        3.0
            Nexus 7 ('12)     7.0        600*960        1.3
            iPad Mini         7.9        768*1024       1.0

            注∶以上数据均参考自 https://material.io/devices/.

            注∶作为前端开发，不建议大家去纠结dp , dpi , pt , ppi等单位。


        1.4移动端调试方法

            Chrome DevTools(谷歌浏览器)的模拟手机调试

            搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
            
            使用外网服务器，直接IP或域名访问



        1.4 总结

            移动端浏览器我们主要对webkit内核进行兼容
            我们现在开发的移动端主要针对手机端开发'
            现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
            学会用谷歌浏览器模拟手机界面以及调试


      -->
</body>
</html>